import React, { useState } from 'react';
import TextField from '@mui/material/TextField';
import IconButton from '@mui/material/IconButton';
import VisibilityIcon from '@mui/icons-material/Visibility';
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';

function PasswordField({ 
  label = "密码", 
  value, 
  onChange, 
  name = "password", 
  fullWidth = true, 
  size = "small", 
  margin = "dense",
  sx = { my: 1 },
  ...props 
}) {
  const [showPassword, setShowPassword] = useState(false);
  
  const handleTogglePasswordVisibility = () => {
    setShowPassword(!showPassword);
  };
  
  return (
    <TextField
      margin={margin}
      label={label}
      type={showPassword ? "text" : "password"}
      fullWidth={fullWidth}
      variant="outlined"
      name={name}
      value={value}
      onChange={onChange}
      size={size}
      sx={sx}
      InputProps={{
        endAdornment: (
          <IconButton
            aria-label="toggle password visibility"
            onClick={handleTogglePasswordVisibility}
            edge="end"
            size="small"
          >
            {showPassword ? <VisibilityOffIcon /> : <VisibilityIcon />}
          </IconButton>
        ),
      }}
      {...props}
    />
  );
}

export default PasswordField;